<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>
	<body style="padding: 0px;margin: 0px;background: #383838;">
		<div id="app" style="width: 100%;">
			<div style="display: flex;justify-content: space-between;flex-wrap: wrap;width: 100%;">
				<div v-for="(item,k) in dataList" style="width: calc(50% - 6px);padding: 3px;">
					<div style="background: #2a2a2a;margin: 3px;height: calc(50vh - 50px);width: 100%;" v-if="item.video">
						<video src="" poster="./images/mt/pt.png" :id="`vd_${item.id}`" autoplay :ref="`vd_${item.id}`" style="width: 100%;height: 100%;" object-fit="fill" ></video>
						<div style="height: 30px;border-radius: 2px;color: white;position: relative;background: #000e2c66;bottom: 34px;display: flex;justify-content: space-between;align-items: center;width: 100%;">
							<div style="font-size: 10px;padding-left: 6px;">{{item.name}}</div>
							<div style="display: flex;align-items: center;">
								<img v-if="item.audio" src="./images/mt/audioon.png" style="width: 15px;margin-right: 3px;" alt="">
								<img v-else src="./images/mt/audioffx.png" style="width: 15px;margin-right: 3px;" alt="">
								<img v-if="item.video" src="./images/mt/cameraon.png" style="width: 16px;margin-right: 6px;" alt="">
								<img v-else src="./images/mt/cameraoffx.png" style="width: 16px;margin-right: 6px;" alt="">
							</div>
						</div>
					</div>
					<div v-else style="display: flex;flex-direction: column;align-items: center;width: calc(50% - 12px);background: #2a2a2a;margin: 3px;height: calc(50vh - 50px);position: absolute;">
						<img :src="item.avatar" style="width: 50px;height: 50px;margin-top: 50px;border-radius: 25px;" alt="">
						<div style="color: #cbcbcb;margin-top: 5px;font-size: 8px;">{{item.name}}</div>
						<div style="color: #eeeeee;margin-top: 15px;font-size: 12px;">摄像头已关闭</div>
						<img v-if="item.audio" src="./images/mt/audioon.png" style="width: 25px;margin-top: 100px;" alt="">
						<img v-else src="./images/mt/audioffx.png" style="width: 25px;margin-top: 100px;" alt="">
					</div>
				</div>
			</div>
			
			<div style="display: flex;align-items: center;width: 100%;background: #222;position: fixed;bottom: 0px;left: 0px;justify-content: space-evenly;width: 100%;padding: 10px 0px;">
				<div style="display: flex;flex-direction: column;align-items: center;color: white;font-size: 12px;">
					<img @click="muteAudio(false)" v-if="myvddata.audio" src="./images/mt/audioon.png" style="width: 25px;height: 25px;" alt="">
					<img @click="muteAudio(true)"  v-else src="./images/mt/audioffx.png" style="width: 25px;height: 25px;" alt="">
					<div>静音</div>
				</div>
				<div style="display: flex;flex-direction: column;align-items: center;color: white;font-size: 12px;">
					<img @click="muteVideo(false)" v-if="myvddata.video" src="./images/mt/cameraon.png" style="width: 25px;height: 25px;" alt="">
					<img @click="muteVideo(true)" v-else src="./images/mt/cameraoffx.png" style="width: 25px;height: 25px;" alt="">
					<div>摄像头</div>
				</div>
				<div @click="changeCamera" style="display: flex;flex-direction: column;align-items: center;color: white;font-size: 12px;">
					<img v-if="!cameraChangeLoading" src="./images/mt/camerachange.png" style="width: 25px;height: 25px;" alt="">
					<img v-if="cameraChangeLoading" src="./images/mt/loading.gif" style="width: 25px;height: 25px;" alt="">
					<div>切换</div>
				</div>
				<div @click="exit" style="display: flex;flex-direction: column;align-items: center;color: white;font-size: 12px;">
					<img src="./images/mt/exitmt.png" style="width: 20px;height: 20px;" alt="">
					<div>退出</div>
				</div>
			</div>
		</div>
	</body>
	<!-- 引入uniapp的SDK-->
	<script type="text/javascript" src="./js/uni.webview.1.5.4.js">
	</script>
	<!-- 引入vue方法-->
	<script src="./js/vue.js"></script>
	<script type="text/javascript" src="./js/mtvd.js"></script>
	<script type="text/javascript">
		function getQueryVariable(variable) {
			var query = window.location.search.substring(1);
			var vars = query.split("&");
			for (var i = 0; i < vars.length; i++) {
				var pair = vars[i].split("=");
				if (pair[0] == variable) {
					return pair[1];
				}
			}
			return "";
		};
		
		const id = getQueryVariable("id")
		const name = getQueryVariable("name")
		const roomId = getQueryVariable("roomId")
		app.initData({id,name,roomId})
		// 在引用依赖的文件后，需要在 HTML 中监听 UniAppJSBridgeReady 事件触发后，才能安全调用 uni 的 API。  
		document.addEventListener('UniAppJSBridgeReady', function() {
			uni.getEnv(function(res) {
				console.log('获取当前环境：' + JSON.stringify(res));
				app.publishStream({video:true,audio:false})
			});
		});
	

		// HTML 接受APP发送过来的消息 (APP端)
		function requestData(data) {
			console.log(JSON.stringify(data),'HTML 接受APP发送过来的消息 (APP端)');
			// app.dataList = data.navigation // 赋值
		}
	</script>
</html>

